import React, {FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
import {Button, Input, List} from "antd";
import "./css/MultiInput.less";
import useStateRef from "../../customUse/useStateRef.tsx";
import {isArray} from "../../utils";
import GlobalIcon from "../../global/GlobalIcon.tsx";

interface MultiInputProps {
    onChange: Function,
    key: string,
    value?: any,
    ds?: any
}

const MultiInput: FC<MultiInputProps> = (props) => {

    const listRef = useRef([]);

    const [list, setList] = useStateRef([], listRef),
        [value, setValue] = useState<string>("");

    useEffect(() => {
        const {ds = {}}: { ds?: any } = props;
        let newValue: any = ds.value || props.value;
        if (newValue && !isArray(newValue)) {
            newValue = newValue.split(",");
        }
        setList(newValue || []);
    }, [props.ds]);

    const handleAdd: Function = useCallback((value: string) => {
        value = value.trim();
        if (listRef.current.indexOf(value) === -1 && value) {
            let newList: string[] = [...listRef.current, value];
            props.onChange && props.onChange(newList);
            setList(newList);
            setValue("")
        }
    }, []);

    const handleChangeIndex: Function = useCallback((newValue: string, change: number) => {
        let index = listRef.current.indexOf(newValue),
            targetI: number = index + change,
            row: any = [...listRef.current],
            tempIRow: any = row[index];
        if (targetI > row.length - 1 || targetI < 0) {
            return;
        }
        row.splice(index, 1, row[targetI]);
        row.splice(targetI, 1, tempIRow);
        setList([...row]);
        props.onChange && props.onChange([...row]);
    }, []);

    const handleEdit: Function = useCallback((newValue: string) => {
        // @ts-ignore
        let index = listRef.current.indexOf(newValue);
        setValue(newValue);
        listRef.current.splice(index, 1);
        setList([...listRef.current]);
    }, []);

    const handleDelete: Function = useCallback((value: string) => {
        let index = listRef.current.indexOf(value);
        listRef.current.splice(index, 1);
        setList([...listRef.current]);
        props.onChange && props.onChange(listRef.current);

    }, []);

    const renderMultiInput = useMemo(() => {
        return (
            <div className="sf_core_multi_input">
                <List
                    className={"sf_core_multi_input_list"}
                    size="small"
                    bordered
                    dataSource={list}
                    renderItem={(item: any) => {
                        if (!item) {
                            return null
                        }
                        return (
                            <List.Item
                                actions={props.disabled ? [] : [
                                    <Button onClick={() => handleChangeIndex(item, -1)} type="link"
                                            icon={<GlobalIcon name={"icon-put-away"}/>}/>,
                                    <Button onClick={() => handleChangeIndex(item, 1)} type="link"
                                            icon={<GlobalIcon name={"icon-launch"}/>}/>,
                                    <Button onClick={() => handleEdit(item)} type="link"
                                            icon={<GlobalIcon name={"icon-edit"}/>}/>,
                                    <Button onClick={() => handleDelete(item)} danger type="link"
                                            icon={<GlobalIcon name={"icon-delete"}/>}/>]}
                            >{item}</List.Item>
                        )
                    }}
                />
                <Input.Search
                    size={"small"}
                    value={value}
                    disabled={props.disabled}
                    enterButton={<GlobalIcon name={"icon-create"}/>}
                    onSearch={handleAdd}
                    onChange={e => (setValue(e.target.value))}
                />
            </div>
        )
    }, [value, list]);
    return (renderMultiInput);
};

export default React.memo(MultiInput);